import React, {useState, useEffect} from 'react'
import { Table, Space } from 'antd'
import {getBookList} from '../../http/bookApi'
import AuthButton from '../../components/AuthButton'

const columns = [
  {
    title: '书名',
    dataIndex: 'bookName',
    key: 'bookName',
    render: text => <a>{text}</a>,
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author',
  },
  {
    title: '分类',
    dataIndex: 'categoryName',
    key: 'categoryName',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <AuthButton type="编辑图书"></AuthButton>
        <AuthButton type="删除图书"></AuthButton>
      </Space>
    ),
  },
]

export default function Book() {
  const [bookData, setBookData] = useState([])

  useEffect(() => {
    getBookList(1, 2)
    .then(res => {
      console.log(res)
      setBookData(res.data.data)
    })
    .catch(err => {
      console.log(err)
    })
  }, [])

  return (
    <div>
      Book
      <div>
        <AuthButton type="新增图书"></AuthButton>
      </div>
      <Table columns={columns} dataSource={bookData} />
    </div>
  )
}
